import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:smart_devices/routes/index.dart';
import 'package:smart_devices/ui/image_overlay.dart';
import 'package:smart_devices/ui/scroll_refresh_config.dart';
import 'package:smart_devices/utils/colors.dart';
import 'package:smart_devices/utils/styles.dart';
import 'package:smart_devices/utils/tools.dart';

import 'part_logic.dart';

class DeviceSparePartView extends GetView<DeviceSparePartLogic> {
  const DeviceSparePartView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor:
            ColorsUtils.parseColorFromHexString(ColorsUtils.colorF6f6),
        appBar: AppBar(
          leading: IconButton(
              icon: const Icon(
                Icons.arrow_back_ios,
                color: Colors.white,
                size: 15,
              ),
              onPressed: Get.back),
          automaticallyImplyLeading: false,
          backgroundColor:
              ColorsUtils.parseColorFromHexString(ColorsUtils.color0052),
          title: ObxValue(
              (data) => Text(
                    '关联备件(${data.value})',
                    style: StylesUtils.customTextStyle(
                        fontSize: 18, fontWeight: FontWeight.w700),
                  ),
              controller.total),
          centerTitle: true,
          systemOverlayStyle: SystemUiOverlayStyle.dark,
          bottom: PreferredSize(
              preferredSize: const Size.fromHeight(50),
              child: Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 15, vertical: 7),
                decoration: const BoxDecoration(color: Colors.white),
                child: Row(
                  children: [
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          border: Border.all(
                              color: ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.colorE4e4))),
                      child: Row(
                        children: [
                          Container(
                            width: 36,
                            alignment: Alignment.center,
                            child: ToolsUtils.assetImageSvg('u2232.svg'),
                          ),
                          Expanded(
                              child: Obx(() => TextField(
                                    textDirection: TextDirection.ltr,
                                    controller: TextEditingController(
                                        text: controller.search.value),
                                    cursorColor:
                                        ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.color1c24),
                                    style: StylesUtils.customTextStyle(
                                        fontSize: 16,
                                        color: ColorsUtils.color1c24),
                                    textAlign: TextAlign.left,
                                    textAlignVertical: TextAlignVertical.center,
                                    cursorWidth: 2,
                                    // cursorHeight: 18,
                                    cursorRadius: const Radius.circular(2),
                                    decoration: InputDecoration(
                                        hintText: '请输入备件编码/备件名称',
                                        hintStyle: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCccc,
                                            fontSize: 13),
                                        isDense: true,
                                        isCollapsed: true,
                                        border: InputBorder.none,
                                        focusColor:
                                            ColorsUtils.parseColorFromHexString(
                                                ColorsUtils.color1c24),
                                        contentPadding:
                                            const EdgeInsets.symmetric(
                                                vertical: 13),
                                        focusedBorder: InputBorder.none),
                                    onChanged: (String text) {
                                      controller.search.value = text;
                                    },
                                  )))
                        ],
                      ),
                    )),
                    InkWell(
                      onTap: () {
                        Get.toNamed(Routes.deviceSpareScreen);
                      },
                      child: Container(
                        width: 60,
                        alignment: Alignment.centerRight,
                        child: Text.rich(TextSpan(children: [
                          WidgetSpan(
                              alignment: PlaceholderAlignment.middle,
                              child: ToolsUtils.assetImageSvg('u2226.svg',
                                  width: 15, height: 15)),
                          TextSpan(
                              text: '筛选',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333))
                        ])),
                      ),
                    )
                  ],
                ),
              )),
          elevation: 0,
        ),
        body: Obx(() => scrollRefreshConfig(context)));
  }

  Widget scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: controller.refreshController,
      onRefresh: controller.onRefresh,
      onLoading: controller.onLoading,
      child: listViewBuilder(context),
    );
  }

  ListView listViewBuilder(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return InkWell(
            onTap: () {
              Get.toNamed(Routes.deviceSpareDetails,
                  arguments: controller.pageList[index]);
            },
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 10),
              margin: const EdgeInsets.only(top: 15),
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                children: [
                  Container(
                    width: 130,
                    alignment: Alignment.center,
                    child: ImageOverlay(
                      width: 80,
                      height: 80,
                      image: NetworkImage(controller.pageList[index].imgUrl),
                    ),
                  ),
                  Expanded(
                      child: Column(
                    children: [
                      Container(
                        height: 40,
                        alignment: Alignment.centerLeft,
                        child: Text(
                          controller.pageList[index].name,
                          style: StylesUtils.customTextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                          child: Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '设备编码：${controller.pageList[index].code}',
                          style: StylesUtils.customTextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: ColorsUtils.colorAaaa),
                        ),
                      )),
                      Expanded(
                          child: Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '设备模型：${controller.pageList[index].model}',
                          style: StylesUtils.customTextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: ColorsUtils.colorAaaa),
                        ),
                      )),
                      Expanded(
                          child: Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '设备数量：${controller.pageList[index].count}',
                          style: StylesUtils.customTextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: ColorsUtils.colorAaaa),
                        ),
                      )),
                    ],
                  ))
                ],
              ),
            ));
      },
      itemCount: controller.pageList.length,
      itemExtent: 130,
    );
  }
}
